<template>
  <div>
    <h5 v-if="status.isFirst">输入用户名进行查询</h5>
    <!-- <Loading v-if="status.isLoading" /> -->
    <h5 v-if="status.isError">查询失败</h5>
    <ul v-if="status.List">
      <li v-for="item in list" :key="item.id">
        <img :src="item.avatar_url" alt="" width="80px" height="80px" />
        <h6>用户名:{{ item.login.substr(0, 5) }}</h6>
      </li>
    </ul>
  </div>
</template>

<script>

import request from "@/api/request.js";
// import Loading from "@/components/GitHub/Loading.vue";
export default {
  name: "MainGitHub",
  data() {
    return {
      list: [],
      status: {
        isFirst: true,
        isLoading: false,
        isError: false,
        List: false,
      },
    };
  },
  methods: {},
  mounted() {
    this.$bus.$on("search", async (value) => {
      
      //修改状态
      this.status.isFirst = false;
      this.status.List = false;
      this.status.isError = false;
      // https://api.github.com/search/users?q=xxx
      try {
        let result = await request({
          method: "get",
          url: "/search/users",
          params: { q: value },
        });
        console.log(result);
        this.list = result.items.splice(0, 15);
        //修改状态
        this.status.List = true;
        this.status.isError = false;
      } catch (error) {
        console.log(error);
        this.status.List = false;
        this.status.isError = true;
      }
    });
  },
  components: {
    // Loading,
  },
};
</script>

<style lang="less" scoped>
ul {
  width: 300px;
  margin-top: 10px;
  li {
    width: 100px;
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 4px;
    h6 {
      text-align: center;
    }
  }
}
</style>